﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HealthClient.aspx.cs" Inherits="Client.HealthClient" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <!-- Combo-handled YUI CSS files: -->
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/autocomplete/assets/skins/sam/autocomplete.css" />
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/base/base-min.css" />
    <!-- Combo-handled YUI JS files: -->
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/animation/animation-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/datasource/datasource-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/autocomplete/autocomplete-min.js"></script>
     
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/fonts/fonts-min.css" />
    
    <!-- Style -->
    <style type="text/css">
        hr {
        border: 0;
        width: 90%;
        height:1px;
        background-image:url('Img/grad.png');
        background-repeat:repeat;
        margin-top: 10px;
        margin-bottom: 10px;
        }
        .specialty 
        {
             font-size:14px;
             font-weight:bold;
             color:#EE4E4E;
            }
            .big {font-size:20px; color:#DE1818;font-weight:bold;}
        .text 
        {
            font-size:13px;
            font-weight:bold;
            color:#333333;
            }
        .myBox 
        {
            margin:20px;
            margin-top: 20px;
            margin-bottom: 10px;
        }
        #myAutoComplete {
            width:15em; /* set width here or else widget will expand to fit its container */
            padding-bottom:2em;
            height:130px;
    }
        .col 
        {
            width:75px;
            }
        .li {padding:0 0 20px 0;}
        #Counter {margin-left:20px; margin-top:5px;padding-top:10px;}
        #SearchBox {width:850px;
             height:180px;
             margin-left:auto;
             margin-right:auto; padding:10px 0; background-image:url('Img/grad.png'); background-repeat:repeat-x;}
        #ResultsWrapper {width:850px; margin-left:auto; margin-right:auto; background-color:White;}
        .col {width:250px; margin-right:20px; margin-left:20px; float:left;}
        div.spacer{clear:both; height:10px; display:block;}
        .star {width: 25px; height:24px; display:inline-block; background-image:url('Img/star.png');}
        .star2 {width: 25px; height:24px; display:inline-block; background-image:url('Img/star2.png');}
        .plus {width: 25px; height:24px; display:inline-block; background-image:url('Img/plus.png');}
        body {margin:0; padding:0; background-color:#333333; background-image:url('Img/pattern.gif'); background-repeat:repeat;}
        h2 { margin:0; padding: 0 0 10px 0; font-family:Verdana; font-size:18px; color:#333333;}
        #col1 {width: 240px;}
        #col2 {width: 240px;}
        #col3 {width: 240px;}
        .button {color:#DE1818; padding: 0 10px 10px 0; font-size:20px; text-decoration:underline; font-family:Verdana; font-weight:bold;}
    </style> 

    <script type ="text/javascript" language="javascript">
        function something() {
            arrayStates = [
	   "Acupuncture",
       "Allergists"
,"Beauty and Spas"
,"Counseling & Mental Health"
,"Cardiologists"
,"Children`s Clothing"
,"Chiropractors"
,"Cosmetic Surgeons"
,"Dermatologists"
,"Ear Nose & Throat"
,"Family Practice"
,"Fertility"
,"Fitness & Instruction"
,"Hair Removal"
,"Trainers"
,"Home Health Care"
,"Hospitals"
,"Internal Medicine"
,"Laser Hair Removal"
,"Laser Eye Surgery/Lasik"
,"Massage"
,"Medical Centers"
,"Medical Spas"
,"Midwives"
,"Naturopathic/Holistic"
,"Nutritionists"
,"Obstetricians and Gynecologists"
,"Ophthalmologists"
,"Eyewear & Opticians"
,"Optometrists"
,"Oral Surgeons"
,"Orthopedists"
,"Pediatricians"
,"Physical Therapy"
,"Doctors"
,"Pilates"
,"Podiatrists"
,"Psychiatrists"
,"Retirement Homes"
,"Skin Care"
,"Day Spas"
,"Sports Medicine"
,"Tattoo Removal"
,"Traditional Chinese Medicine"
,"Urgent Care"
,"Weight Loss Centers"
,"Yoga"
	];
            YAHOO.example.BasicLocal = function () {
                // Use a LocalDataSource 
                var oDS = new YAHOO.util.LocalDataSource(arrayStates);
                // Optional to define fields for single-dimensional array 
                oDS.responseSchema = { fields: ["category"] };

                // Instantiate the AutoComplete 
                var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
                oAC.prehighlightClassName = "yui-ac-prehighlight";
                oAC.useShadow = true;

                return {
                    oDS: oDS,
                    oAC: oAC
                };
            } ();
        }

    </script>
</head>

<body onload="something()">
    <form id="form1" runat="server">
    <!-- Search box code -->
    <div runat="server" id="SearchBox">
        <!-- Speciality Column -->
        <div id="col1" class="col">
            <h2>Specialty:</h2>
            <label for="myInput"></label> 

<div id="myAutoComplete" runat='server' class="yui-ac">
	<input type="text" id="myInput" runat ="server" class="yui-ac-input" autocomplete="on">
	<div id="myContainer" class="yui-ac-container" style="left: 0px; top: 24px;"><div class="yui-ac-content" style="width: 197px; height: 0px; display: none;"><div class="yui-ac-hd" style="display: none;"></div><div class="yui-ac-bd"><ul><li style="" class=""></li><li style="display: none;"></li><li style="display: none;"></li><li style="display: none;"></li><li style="display: none;"></li><li style="display: none;"></li></ul></div><div class="yui-ac-ft" style="display: none;"></div></div><div class="yui-ac-shadow" style="width: 0pt; height: 0pt;"></div></div>
</div>



	        </div> 
        <!-- Average Rating Column-->
        <div id="col2" class="col">
            <h2>Average Rating:</h2>
            <asp:RadioButtonList runat="server" ID="avgrating" BorderStyle="None" RepeatLayout="Flow" CellPadding="10">
                <asp:ListItem Value="5" class="li"><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span></asp:ListItem>
                <asp:ListItem Value="4" class="li"><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="plus"></span></asp:ListItem>
                <asp:ListItem Value="3" class="li"><span class="star"></span><span class="star"></span><span class="star"></span><span class="plus"></span></asp:ListItem>
                <asp:ListItem Value="2" class="li"><span class="star"></span><span class="star"></span><span class="plus"></span></asp:ListItem>
                <asp:ListItem Value="1" class="li" Selected="True"><span class="star"></span><span class="plus"></span></asp:ListItem>
            </asp:RadioButtonList>
        </div>
        <!-- Distance Column -->
        <div id="col3" class="col">
            <h2>Zip Code:</h2>
            <asp:TextBox runat="server" ID="zip" MaxLength="5"></asp:TextBox>
            <br />
            <h2>Max Distance:</h2>
            <asp:TextBox runat="server" ID="distance" MaxLength="6"></asp:TextBox>
            <br /> <br /> <br />
            <a class="button" runat="server" onserverclick="Search" href="#">Submit</a>
            <a class="button" runat="server" onclick="" href="#">Reset</a>
        </div>
    </div>
    <div id="ResultsWrapper" runat="server">
    
        <div id="Counter" style="display:none;" runat="server">
            <h2><span id="ResultsCount" runat="server"></span> result(s) found.</h2>
        </div>
        <div id="Results" runat="server"></div>
    </div>
    </form>
</body>
</html>
